<template>
  <div>
    <input
      type="text"
      placeholder="请输入 sth..."
      v-model="todoText"
    />
    <button @click="addTodo">ADD Item</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'TodoForm',
  emits: ['onAddTodo'],
  setup(props, { emit }) {
    const todoText = ref('');
    
    const addTodo = () => {
      emit('onAddTodo', {
        id: Date.now(),
        content: todoText.value,
        completed: false
      })
      todoText.value = '';
    }

    return {
      todoText,
      addTodo
    }
  }
}
</script>

<style>

</style>